<template>
    <transition @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-if="isShow" :style="{ left: x + 'px' }">
            <div class="inner" :style="{ top: y + 'px' }"></div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'Parabolicsphere',
    props: {
        dx: {
            type: Number,
            required: false,
            default: 25
        },
        dy: {
            type: Number,
            required: false,
            default: 700
        },
        duration: {
            type: Number,
            default: 0.5,
            required: false
        },
    },
    data() {
        return {
            x: 0,
            y: 0,
            isShow: false
        }
    },


    methods: {
        enter(el, done) {
            el.offsetLeft;
            el.style.left = `${this.dx}px`;
            el.style.transition = `all ${this.duration}s linear`;

            let inner = el.children[0];
            inner.style.top = `${this.dy}px`;
            inner.style.transition = `all ${this.duration}s cubic-bezier(0,-0.29,.91,.04)`;

            done();
        },
        afterEnter(el) {
            this.isShow = false;
        },
    }
}
</script>
<style scoped lang='scss'>
.ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}

.inner {
    width: 20px;
    height: 20px;
    background-color: blue;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
